<%--
  Created by IntelliJ IDEA.
  User: 金贤哲
  Date: 2017/5/27 0027
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>商务/客服信息</title>
    <meta name="decorator" content="default"/>
    <script src="${ctxStatic}/layer/layer.js"></script>
    <script src="${ctxStatic}/echarts/echarts.min.js"></script>

</head>
<body>
<div class="row" style="padding-left: 20px">
    <table id="contentTable" class="layui-table" style="margin-top: 10px;">
        <thead>
        <tr>
            <th style="width: 20%">姓名</th>
            <th style="width: 30%">部门</th>
            <th style="width: 30%">手机</th>
            <th style="width: 20%">座机</th>
        </tr>
        </thead>
        <tbody>
        <c:choose>
            <c:when test="${empty user && fn:length(user)==0 }">	<tr> <td colspan="5"><div class="col-md-2 col-md-offset-5" style="text-align: center;font-size:32px; line-height:550px; height: 550px;">暂无改商务/客服人员资料 </div></td> </tr></c:when>
            <c:otherwise>
                <c:forEach items="${user}" var="sr" varStatus="p">
                    <tr>
                        <td style="text-align: center" id="realname" data-id="${sr.id}">
                                ${sr.realname}
                        </td>
                        <td style="text-align: center">
                                ${sr.office}
                        </td>
                        <td style="text-align: center">
                                ${sr.mobile}
                        </td>
                        <td style="text-align: center">
                                ${sr.phone}
                        </td>
                    </tr>

                </c:forEach>
        <thead>
                <tr>
                    <th style="width: 20%">总下款</th>
                    <th style="width: 20%">客户数量</th>
                    <th style="width: 20%">${nowtime}下款(本月)</th>
                    <th style="width: 20%">[${weekstart}-${weekend}]下款(本周)</th>
                </tr>
        </thead>
                <tr>
                    <td style="text-align: center">
                           ${num}(万元)
                    </td>
                    <td style="text-align: center">
                            ${clientnum}(人)
                    </td>
                    <td style="text-align: center">
                            ${nownum}(万元)
                    </td>
                    <td style="text-align: center">
                            ${week}(万元)
                    </td>
                </tr>
                <tr>
                    <td colspan="4" id="map" style="width: 500px;height:300px;"></td>
                </tr>
            </c:otherwise>
        </c:choose>
        <c:forEach items="${page.list}" var="loan">

        </c:forEach>
        </tbody>
    </table>
</div>
<script>
    $(document).ready(function() {
        function objKeySort(obj) {//排序的函数
            var newkey = Object.keys(obj).sort();
            //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
            var newObj = {};//创建一个新的对象，用于存放排好序的键值对
            for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
                newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
            }
            return newObj;//返回排好序的新对象
        }
        $('#realname').trigger('click');
        $('#realname').click( function(){
            var  managerid = $(this).data("id");
            if ( managerid != '' ){
                $.ajax({
                    type: "POST",
                    url: "${ctx}/sys/member/member/getMaps",
                    data: {"id":managerid},
                    dataType: "json",
                    success: function(shu){
                        console.log(shu);
                        var shu1 = objKeySort(shu);
                        var myChart = echarts.init(document.getElementById('map'));
                        var time = [];
                        var sums = [];
//                        for (var i=0;i<shu.length;i++) {
//                            time.push((shu[i].times).substring(5,10));
//                            sums.push(shu[i].sum);
//                        }
                        for (var key in shu1) {
                            time.push(key.substring(5,10));
                            sums.push(shu1[key]);
                        }
                        console.log(time);
                        console.log(sums);
                            // 指定图表的配置项和数据
                            var option = {
                                title: {
                                    text: '本周下款金额（单位:万元）',
                                },
                                tooltip : {
                                    trigger: 'axis',
                                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    },
                                    formatter: function (params) {
                                        var tar = params[1];
                                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type : 'category',
                                    splitLine: {show:false},
                                    data : time
                                },
                                yAxis: {
                                    type : 'value'
                                },
                                series: [
                                    {
                                        name: '辅助',
                                        type: 'bar',
                                        stack:  '总量',
                                        itemStyle: {
                                            normal: {
                                                barBorderColor: 'rgba(0,0,0,0)',
                                                color: 'rgba(0,0,0,0)'
                                            },
                                            emphasis: {
                                                barBorderColor: 'rgba(0,0,0,0)',
                                                color: 'rgba(0,0,0,0)'
                                            }
                                        },
                                        data: [0, 0, 0, 0, 0, 0, 0]
                                    },
                                    {
                                        name: '下款量',
                                        type: 'bar',
                                        stack: '总量',
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'inside'
                                            }
                                        },
                                        data:sums
                                    }
                                ]
                            };


                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }

                });
            }
        })
        $('#realname').trigger('click');

    });
</script>
</body>
</html>
